<template>
  <div class="app-container home">
    <div class="page-header" v-if="details">
      <div class="header-node">
        <span class="name">编码：</span>
        <span class="teext">{{ details.code }}</span>
      </div>
      <div class="header-node ml50">
        <span class="name">推介类型：</span>
        <span class="teext">{{ details.businessTypeName }}</span>
      </div>
      <div class="header-node ml50">
        <span class="name">页面名称：</span>
        <span class="teext">{{ details.pageName }}</span>
      </div>
      <div class="header-node ml50">
        <span class="name">所属节点：</span>
        <span class="teext">{{ details.nodeName }}</span>
      </div>
      <div class="ml-auto">
        <button @click="handleExit">返回</button>
      </div>
    </div>
    <approval-timeline
      :activities="activities"
      show-type="vertical"
      style="margin-top: 30px; margin-left: 16px"
    />
  </div>
</template>

<script>
import ApprovalTimeline from "../../../components/ApprovalTimeline/ApprovalTimeline.vue";
import { commentByTaskid } from "@/api/approvalManage/waitingApproval.js"
export default {
  components: { ApprovalTimeline },
  name: "approvalOpinion",
  data() {
    return {
      reverse: true,
      details: null,
      activities: [],
    };
  },
  methods: {
    handleExit() {
      if (this.$route.query.type === "completeSubmit") {
        this.$router.push("/approvalManage/completeSubmit");
      } else {
        this.$router.push("/approvalManage/completeApproval");
      }
    },
  },
  mounted() {
    this.details = JSON.parse(this.$route.query.data);
    commentByTaskid({procInstId: this.details.procInstId}).then(res => {
      this.activities = res.data;
    });
  },
};
</script>

<style scoped lang="scss">
.page-header {
  border-bottom: 1px solid #efefef;
  display: flex;
  padding-bottom: 20px;
  .header-node {
    .name {
      color: #888;
    }
  }
  .ml50 {
    margin-left: 50px;
  }
  .ml-auto {
    margin-left: auto;
    button {
      width: 80px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      background: #fff;
      color: #971111;
      border: 1px solid #971111;
      outline: none;
      cursor: pointer;
      font-size: 16px;
      border-radius: 3px;
      font-weight: 400;
    }
  }
}
.el-timeline {
  padding: 0;
  margin-top: 30px;
}
</style>